<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <style>
        .wrlistduce a:hover {
            color: #c51520;
        }

        .wrlistUl li:hover {
            border: 1px solid #c51520;
        }
    </style>
</head>

<body>
    <script src="..//js/jquery-1.9.1.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/pagination.js"></script>
    <!-- 头部 -->
    <div id="wrheader">
        <div class="wrheaderCon">

            <span class="wrheader-b" id="ShowWelcome">您好，<span title="18911792346"
                    style="color:#8cc341">18911792346</span>,欢迎来到D1购物(<a class="Ym_fade" href="login.html"
                    target="_self" style="color:#8cc341">退出登录</a>)&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span class="wrheader-p">
                你好，欢迎来到D1购物，请&nbsp;<a href="html/login.html" style="color:#8cc341">登录</a>&nbsp;或&nbsp;
                <a href="html/register.html" target="_blank" style="color:#8cc341">注册</a>
            </span>
            <ul class="wrheader-ul">
                <li>
                    <a href="javascript:;">我的账户<i class="iconfont icon-icon-down"></i></a>
                    <div class="wrht-erji">
                        <ul>
                            <li>
                                <a href="javascript:;">我的订单</a>
                            </li>
                            <li>
                                <a href="javascript:;">我的优惠卷</a>
                            </li>
                            <li>
                                <a href="javascript:;">我的积分</a>
                            </li>
                            <li>
                                <a href="javascript:;">我的收藏</a>
                            </li>
                            <li>
                                <a href="javascript:;">我的晒单</a>
                            </li>
                            <li>
                                <a href="javascript:;">我的评论</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li><a href="javascript:;">订单查询</a></li>
                <li><a href="javascript:;">积分换购</a></li>
                <li><a href="javascript:;">帮助中心</a></li>
                <li class="wrht-li">
                    <a href="javascript:;">手机优尚</a>
                    <div class="wrht-mobile">
                        <div class="wrhtmob">
                            <div><img src="../images/app-tongyongerweima.png" alt=""></div>
                            <div>
                                <span>关注优尚创意生活</span><br>
                                <span>微信扫一扫关注<br>创意生活&nbsp;&nbsp;尽在掌握</span>
                            </div>
                        </div>
                        <div class="wrhtmob">
                            <div><img src="../images/youshangchuangyishenghuo.jpg" alt=""></div>
                            <div>
                                <span>关注优尚美妆</span><br>
                                <span>微信扫一扫关注<br>每周一次美妆特卖</span>
                            </div>
                        </div>
                        <div class="wrhtmob noborder">
                            <div><img src="../images/youshangmeizhuang.png" alt=""></div>
                            <div>
                                <span>下载APP</span><br>
                                <span>微信扫一扫下载<br>一元领取APP礼物</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="javascript:;">在线客服</a></li>
            </ul>
        </div>
    </div>
    <!-- 导航栏 -->
    <div id="wrnav">
        <div class="wrnav-l"></div>
        <ul class="wrnav-ul">
            <li><a href="javascript:;">首页</a></li>
            <li><a href="javascript:;">创意家居</a></li>
            <li><a href="javascript:;">创意数码</a></li>
            <li><a href="javascript:;">时尚装备</a></li>
        </ul>
        <div class="wrnav-inp">
            <input type="text" placeholder="请输入您要搜索的商品名称或编码">
            <input type="button" value="搜索">
        </div>
        <div class="wrnav-r"><a href="shoppingCart.html">购物车</a><span>0</span>件</div>
    </div>
    <div class="wrsy">
        <li><a href="javascript:;">首页</a>&gt;</li>
        <li><a href="javascript:;">家居用品</a>&gt;</li>
        <li>
            <a href="javascript:;" class="wrsy-jj">居家百货
                <i class="iconfont icon-icon-down"></i>
            </a>
            <div class="wrsy-div">
                <p>居家健康</p>
                <p>个护百货</p>
            </div>
        </li>
    </div>
    <!-- 居家百货 -->
    <div id="wrhouseGoods">
        <div class="wrhouseGoodst">
            <p>居家百货</p>
            <ul class="wrstda">
                <li><a href="javascript:;">家纺布艺</a></li>
                <li><a href="javascript:;">智能家居</a></li>
                <li><a href="javascript:;">空气调节</a></li>
                <li><a href="javascript:;">创意灯具</a></li>
                <li><a href="javascript:;">厨房用具</a></li>
                <li><a href="javascript:;">卫浴用品</a></li>
                <li><a href="javascript:;">清洁用具</a></li>
                <li><a href="javascript:;">创意杯具</a></li>
                <li><a href="javascript:;">雨伞雨具</a></li>
                <li><a href="javascript:;">日用工具</a></li>
                <li><a href="javascript:;">钟表装饰</a></li>
                <li><a href="javascript:;">娱乐玩物</a></li>
            </ul>
        </div>
        <div class="wrhouseGoodst">
            <p>品牌</p>
            <ul class="wrstda">
                <li><a href="javascript:;">迪士尼</a></li>
                <li><a href="javascript:;">YOUSOO</a></li>
                <li><a href="javascript:;">飞利浦</a></li>
                <li><a href="javascript:;">爱国者aigo</a></li>
            </ul>
        </div>
        <div class="wrhouseGoodst">
            <p>价格</p>
            <ul class="wrstda">
                <li><a href="javascript:;">0-49</a></li>
                <li><a href="javascript:;">50-99</a></li>
                <li><a href="javascript:;">100-199</a></li>
                <li><a href="javascript:;">200-299</a></li>
                <li><a href="javascript:;">300-399</a></li>
                <li><a href="javascript:;">400-499</a></li>
                <li><a href="javascript:;">500-599</a></li>
                <li><a href="javascript:;">600-699</a></li>
                <li><a href="javascript:;">700-799</a></li>
                <li><a href="javascript:;">800-1999</a></li>
                <li><a href="javascript:;">2000以上</a></li>
            </ul>
        </div>
    </div>
    <!-- 列表栏 -->
    <div id="wrmenu">
        <ul>
            <li>
                <a href="javascript:;">综合</a>
            </li>
            <li>
                <a href="javascript:;" class="wrmenured">销量<i class="iconfont icon-down"></i></a>
            </li>
            <li>
                <a href="javascript:;">新品<i class="iconfont icon-down"></i></a>
            </li>
            <li>
                <a href="javascript:;">价格<i class="iconfont icon-shangxiasanjiaoxing"></i></a>
            </li>
        </ul>
        <div class="wrmenul">
            <input type="checkbox">限时特价
            <input type="checkbox">D1自营
        </div>
        <div class="wrmenur">
            <span>1</span>/4
            <img src="../images/pagearrow-right.gif" alt="">
        </div>
    </div>
    <!-- 列表 -->
    <div id="wrlist">
        <ul class="wrlistUl">

        </ul>
    </div>



    <div class="pageBox"></div>
    <script>
        var oRow1 = document.querySelector('.wrlistUl')
        oRow1.addEventListener('click', function (ev) {
            console.log(222)
            // 查看详情
            if (ev.target.className === 'opopop') {
                let id = ev.target.getAttribute('data-id')
                window.location.href = 'detail.html'
                console.log(121)
                localStorage.setItem('detailId', id)
            }

        })

        function pageAjax(n) {
            pAjax({
                url: '../php/list.php',
                data: {
                    pagenum: n,
                    pagesize: 12
                }
            }).then(function (res) {
                // 解析数据
                let json = JSON.parse(res)

                console.log(json)

                // 存总条数，给分页使用
                total = json.total

                // 先清空后渲染
                oRow1.innerHTML = ''

                // 循环渲染页面
                json.data.forEach(function (ele) {
                    let str = `<li class='djmooo'>
                    
                        <div class="wrlistImg" data-id ="${ele.id}">
                            <a href="javascript:;">
                                <img class='opopop'src="${ele.img}" alt="" title="${ele.introduce}" data-id ="${ele.id}">
                            </a>
                        </div>
                        <div class="wrlistprice">
                            <span>￥${ele.discount}</span>
                            <span>￥${ele.Spot}</span>
                            <span>
                                <img src="../images/listsf.jpg" alt="" title="晚上22点前支付，即可在当日由圆通快递发出">
                            </span>
                        </div>
                        <div class="wrlistduce">
                            <a href="javascript:;">${ele.introduce}<span>${ele.power}</span></a><br>
                            <a href="javascript:;">${ele.appraise}</a>
                        </div>
                        <div class="wrlistshop">
                            <span>
                                <input type="text" value="1">
                            </span>
                            <span>
                                <a href="javascript:;">
                                    <img src="../images/amountarrow-up.gif" alt="">
                                </a>
                                <a href="javscript:;">
                                    <img src="../images/amountarrow-down.gif" alt="">
                                </a>
                            </span>
                            <span>
                                <a href="javascript:;">
                                    <img src="../images/addcart.jpg" alt="" class="btn-default">
                                </a>
                            </span>
                        </div>
                        
                     </li>`

                    oRow1.innerHTML += str
                })
            })
        }

        // 存总条数
        let total = 0
        pageAjax(1)

        // 分页
        let oPage = document.querySelector('.pageBox')
        // 异步
        setTimeout(function () {
            console.log(localStorage.getItem('pagenum') - 0)
            new Pagination(oPage, {
                // 页码信息
                pageInfo: {
                    pagenum: localStorage.getItem('pagenum') - 0 || 1, // 当前在第几页
                    pagesize: 12, // 一页多少条数据
                    total: total, // 总条数
                    totalpage: 4, // 总页数
                },
                // 文字信息
                textInfo: {
                    // first: 'first',
                    // prev: '上一页',
                    list: '',
                    next: '下一页',
                    last: '尾页'
                },
                change(n) {
                    // console.log(n)
                    // 本次存储
                    localStorage.setItem('pagenum', n)
                    pageAjax(n)
                }
            })
        }, 800)
        // let arr = []

        // 事件委托
    </script>
    <script src="../js/Localshopping.js"></script>
    <div id="footer"></div>
    <script src="../js/ajax.js"></script>
    <script src="../js/list.js"></script>
    <script src="../js/pagination.js"></script>
    <script>
        //    判断没有token返回登陆
        var Y_Loghide = document.querySelector('.wrheader-p')
        var Y_Log = document.querySelector('.wrheader-b')
        if (localStorage.getItem('token') === null) {
            window.location.href = 'html/login.html'
        } else {
            Y_Loghide.style.display = 'none'

        }
        // 退出 清除token 刷新页面
        var LogOut = document.querySelector('.Ym_fade')

        LogOut.addEventListener('click', function () {
            localStorage.removeItem('token')
            location.reload()
        })
    </script>
</body>

</html>